<template>
 <!-- <draggable v-model="arr2"  group="itxst" ghostClass="ghost"  chosenClass="chosen" filter=".forbid"  animation="300"  :move="onMove">
    <transition-group>
     <div :class="item.id==1?'item forbid':'item'" v-for="item in arr2" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>  -->
  <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
    <tr style="background: #f2f2f2;height: 40px;line-height: 40px;">
      <td>排序</td>
      <td>课件名称</td>
      <td>学科</td>
      <td>年级</td>
      <td>创建时间</td>
      <td></td>
    </tr>
    <tr v-for="item in sortingDatas" :key="item.id">
      <td style="width:50px;line-height: 42px;" class="move">{{item.ids}}</td>
      <td style="width:250px;line-height: 42px;">{{item.date}}</td>
      <td style="width:250px;line-height: 42px;">{{item.address}}</td>
      <td style="width:250px;line-height: 42px;">{{item.name}}</td>
      <td style="width:250px;line-height: 42px;">{{item.name}}</td>
      <td style="width:250px;line-height: 42px;"></td>
    </tr>
  </draggable> 
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  props: {
    sortingDatas: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      myArray: []
    }
  },
  methods: {
    //开始拖拽事件
    onStart(){
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  }
}
</script>

<style scoped>
/*被拖拽对象的样式*/
.item {
  position: relative;
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
  text-align: center;
} 
/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}
</style>